<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/pop-ups.css"><!--弹出层-->
    <link rel="stylesheet" href="../../css/icon-font.css"/><!--图标-->

    <!--<link rel="stylesheet" href="../../plugin/swipeslider/css/swipeslider.css">-->
    <link rel="stylesheet" href="../../plugin/swiper/css/swiper.min.css"/>
    <link rel="stylesheet" href="../../plugin/mescroll/css/mescroll.min.css"/>

    <title>JT²会客厅</title>
    <style>
        body {
            background-color: white;
        }

        .index-video-lb {
            height: 2.56rem;
            width: 6.86rem;
        }

        .index-video-selected {
            margin-top: 14px;
        }

        .index-video-selected-item {
            position: relative;
            margin-bottom: 25px;
            width: 3.3rem;
        }

        .index-video-selected-item-img {
            width: 3.3rem;
            height: 1.88rem;
        }

        .index-video-selected-item-img img {
            width: 100%;
            height: 100%;
            border-radius: 4px;
        }

        .index-video-selected-item-time {
            position: absolute;
            right: 0.1rem;
            top: 1.44rem;
        }

        .index-video-selected-item-time div {
            background-color: rgba(0, 0, 0, 0.25);
            color: rgba(255, 255, 255, 0.8);
            padding: 0.02rem 0.08rem;
        }

        .index-video-selected-item-title {
            padding: 9px 0 5px 0;
        }

        .index-video-selected-item-bottom {
            color: rgba(34, 34, 34, 0.45);
        }

        .index-video-selected-item-icon {
            color: #B9B9B9;
        }

        .index-video-bigshot-item {
            position: relative;
            margin-bottom: 24px;
            width: 3.3rem;
        }

        .index-video-bigshot-item-img {
            width: 3.3rem;
            height: 2.1rem;
        }

        .index-video-bigshot-item-img img {
            height: 100%;
            width: 100%;
            border-radius: 4px;
        }

        .index-video-bigshot-item-time {
            position: absolute;
            right: 0.2rem;
            top: 0.2rem;
        }

        .index-video-bigshot-item-time div {
            background-color: rgba(0, 0, 0, 0.25);
            color: rgba(255, 255, 255, 0.8);
            padding: 0 4px;
        }

        .index-video-bigshot-item-title {
            color: #222222;
            padding: 9px 0 5px 0;
        }

        .index-video-bigshot-item-desc {
            color: rgba(34, 34, 34, 0.45);
        }

        .index-video-series-item {
            padding-bottom: 0.44rem;
            border-radius: 0.08rem;
            box-shadow: 0 0 0.32rem 0 rgba(0, 0, 0, 0.1);
        }

        .index-video-series-item-img {
            width: 100%;
            height: 3.12rem;
        }

        .index-video-series-item-img img {
            width: 100%;
            height: 100%;
            border-top-left-radius: 0.08rem;
            border-top-right-radius: 0.08rem;
        }

        .index-video-series-item-content {
            padding: 0.24rem 0.28rem 0.1rem 0.28rem;
        }

        .index-video-series-item-title {
            color: #222222;
            width: 4rem;
        }

        .index-video-series-item-zt {
            color: #FF9523;
        }

        .index-video-series-item-count {
            padding: 0 0.28rem;
            color: rgba(34, 34, 34, 0.45);
        }

        .index-video-series-item-info {
            padding: 0 0.28rem;
        }

        .index-video-series-item-info-wrap {
            padding-top: 12px;
        }

        .index-video-series-item-info-dot {
            width: 0.08rem;
            height: 0.08rem;
            border-radius: 50%;
            background-color: #333333;
        }

        .index-video-series-item-info-content {
            color: rgba(34, 34, 34, 0.7)
        }

        .index-slider-title {
            position: absolute;
            width: 377px;
            bottom: 22px;
            padding-left: 16px;
            line-height: 23px;
            z-index: 1;
            cursor: pointer;
        }

        .video-model-wrap {
            margin-top: 28px;
            margin-bottom: 14px;
        }

        .video-model-box {
            margin-top: 4px;
            margin-bottom: 14px;
        }

        .video-model-title {
            color: #222222;
        }

        .video-model-more {
            color: rgba(34, 34, 34, 0.7);
            height: .48rem;
            line-height: .48rem;
        }

        .video-model-more span {
            margin-left: .12rem;
            color: rgba(153, 153, 153, 0.6);
        }

        .index-video-pad {
            padding: 0 0.32rem 0.32rem 0.32rem;
        }

        .index-video-icon {
            height: 21px;
            width: 65px;
            z-index: 2;
            background: url(../../images/home/home-zbz.png);
            background-size: 100%;
            line-height: 21px;
            color: white;
            left: -0.01rem;
        }

        .index-video-gif {
            height: 0.2rem;
            width: 0.2rem;
            margin-right: 5px;
        }

        .swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
            left: -0.32rem
        }

        .swiper-pagination-bullet {
            background-color: white;
        }

        .swiper-pagination-bullet-active {
            background-color: rgba(44, 104, 255, 1);
        }


    </style>
</head>
<body>

<div class="flex-column ff400 h-100-p fspx14">
    <div class="placeholder-top">
        <!--状态栏-->
        <div class="bg-main status-bar"></div>
        <!--导航栏-->
        <div class="bg-main nav-bar flex-row justify-content-between c-white align-items-center">
            <div class="left-bar" onclick="clickBack()">
                <span class="iconfont iconfanhui1 fspx16"></span>
            </div>
            <div class="center-bar fspx16 ff500 line1">JT²会客厅</div>
            <div class="right-bar">
            </div>
        </div>
    </div>
    <div class="index-video-pad flex-1 mescroll" id="mescroll">
        <!--直播轮播图-->
        <div class="index-video-live" style="height:2.56rem;width:7.5rem;">
            <div id="full_feature" class="swipslider pos-r" style="width: 100%; height: 100%;">
                <div class="sw-slides swiper-wrapper flex-row"></div>
                <div class="swiper-pagination"></div>
            </div>
        </div>

        <div class="flex-row justify-content-between video-model-wrap">
            <div class="video-model-title fspx16 ff500">精选视频</div>
            <div class="flex-row video-model-more align-items-center fspx13" onclick="goMoreRec()">
                <div>更多</div>
                <span class="iconfont iconfanhui fspx11" style="color:#999999"></span>
            </div>
        </div>
        <!--精选视频列表-->
        <div class="index-video-selected flex-row flex-wrap">

        </div>

        <!--大咖云集-->
        <div class="flex-row justify-content-between video-model-box">
            <div class="video-model-title fspx16 ff500">大咖云集</div>
            <div class="flex-row video-model-more align-items-center fspx13" onclick="goMoreBig()">
                <div>更多</div>
                <span class="iconfont iconfanhui fspx11" style="color:#999999"></span>
            </div>
        </div>
        <!--大咖云集列表-->
        <div class="index-video-bigshot flex-row flex-wrap"></div>

        <!--系列专题-->
        <div class="flex-row justify-content-between video-model-box">
            <div class="video-model-title fspx16 ff500">系列专题</div>
            <div class="flex-row video-model-more align-items-center fspx13" onclick="goMoreSeries()">
                <div>更多</div>
                <span class="iconfont iconfanhui fspx11"></span>
            </div>
        </div>
        <!--系列专题列表-->
        <div class="index-video-series"></div>
    </div>
</div>


</body>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/date.js"></script>
<script src="../../js/icon-font.js"></script><!--用于彩色字体图标-->
<script src="../../js/template.js"></script>
<!--<script src="../../plugin/swipeslider/js/swipeslider.js"></script>-->
<script src="../../plugin/swiper/js/swiper.min.js"></script>
<script src="../../plugin/mescroll/js/mescroll.min.js"></script>

<script>

  let meScroll, mySwiper = 0

  function initPage(params) {
    //状态栏自适应
    Utils.sbhAdaptive()

    //下拉刷新
    meScroll = Template.createNoScroll({
      id: 'mescroll', //区域ID
      pageNum: 1,
      downCallback: refreshAchive, //下拉刷新入口
    })
  }

  function startPage(params) {
    $('#seriesReadCnt').html(params.readCnt)
  }

  function reLoadPage() {
    refreshAchive()
  }

  function refreshAchive() {
    if (mySwiper !== 0) {
      mySwiper.destroy()
    }
    getLiveTrainList()//直播轮播图
    getRecTrainList()//精选视频
    getBigShotList()//获取大咖信息
    getVideoSeries()//获取系列专题信息
  }


  //直播轮播图
  function getLiveTrainList() {
    Server.indexVideo.getLiveTrainList({
      pageNum: 1,
      pageSize: 10,
      // funcCode: '1100004'
    }).then(function (data) {
      let htmlStr = ''
      data.trainList.forEach(function (item) {
        let jsonStr = JSON.stringify({
          infoId: item.trainingId,
          infoType: '2',
          resourceType: '1'
        })

        htmlStr += '<div class=\'sw-slide  swiper-slide pos-r \' style="border-radius: 4px;">'
        //  当前时间>= 直播开始时间，则是直播中，
        if (DateUtils.getDttm() >= item.trainStartDttm) {
          htmlStr += '<div class="index-video-icon pos-a"><div class="flex-row align-items-center justify-content-center"><img class="index-video-gif" src="../../images/home/home-play.gif" /><div class="fs12">直播中</div></div></div>'
        }

        htmlStr += '<img class="index-video-lb" src="' + item.coverImgUrl + '" onclick=\'goDetail(' + jsonStr + ')\' style="border-radius: 4px;">'
        htmlStr += '</div>'
      })
      $('.sw-slides').html(htmlStr)

      mySwiper = new Swiper('#full_feature', {
        autoplay: {
          disableOnInteraction: false,
        },
        loop: true,
        speed: 1000,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
      })

      $('.sw-slide img').css({cursor: 'pointer'})

      meScroll.endSuccess()
    }).catch((error) => {
      meScroll.endErr()
    })
  }

  //精选视频
  function getRecTrainList() {
    Server.indexVideo.getRecTrainList({
      pageNum: 1,
      pageSize: 4
    }).then(function (data) {
      let htmlStr = ''
      data.infoList.forEach(function (item, index) {
        let jsonStr = JSON.stringify({
          infoId: item.trainingId,
          infoType: '2',
          resourceType: '2'
        })

        if (index % 2) {
          htmlStr += '<div class=\'flex-column index-video-selected-item\'  onclick=\'goDetail(' + jsonStr + ')\'>'
        } else {
          htmlStr += '<div class=\'flex-column index-video-selected-item mr13 \' onclick=\'goDetail(' + jsonStr + ')\'>'
        }
        htmlStr += '<div class=\'index-video-selected-item-img\'><img src="' + item.coverImgUrl + '"/></div>'
        htmlStr += '<div class=\'index-video-selected-item-time flex-row\'>'
        htmlStr += '<div class=\'fspx11\'>' + DateUtils.s2Str(item.videoDuration) + '</div>'
        htmlStr += '</div>'
        htmlStr += '<div class=\'index-video-selected-item-title line1 fspx15 ff500 \'>' + item.mainTitle + '</div>'
        htmlStr += '<div class=\'index-video-selected-item-bottom flex-row justify-content-between align-items-center\'>'
        htmlStr += '<div class="line1">' + item.lecturer + '</div>'
        htmlStr += '<div class=\'flex-row align-items-center\'>'
        htmlStr += '<span class=\'index-video-selected-item-icon iconfont iconbofangliang-01 fspx14\'></span>'
        htmlStr += '<span class=\'ml5 readCnt_' + item.trainingId + '\'>' + Utils.dealNumber(item.readCnt) + '</span>'
        htmlStr += '</div>'
        htmlStr += '</div>'
        htmlStr += '</div>'
      })

      $('.index-video-selected').html(htmlStr)

      meScroll.endSuccess()
    }).catch((error) => {
      meScroll.endErr()
    })
  }

  function goMoreRec() {
    jsBridge.openWindow('html/video/featured-video.html', {}, {noBar: false})
  }

  //大咖列表
  function getBigShotList() {
    Server.indexVideo.getBigShotList({
      pageNum: 1,
      pageSize: 4,
    }).then(function (data) {
      let htmlStr = ''
      data.infos.forEach(function (item, index) {
        htmlStr += '<div class=\'index-video-bigshot-item flex-column ' + (index % 2 ? '' : 'mr13') + '\' onclick=\'goBigDetail("' + item.characterId + '")\'>'
        htmlStr += '<div class=\'index-video-bigshot-item-img\'><img src="' + item.coverUrl + '"/></div>'
        htmlStr += '<div class=\'index-video-bigshot-item-time flex-row\'>'
        htmlStr += '<div class=\'fspx11\'>' + item.articleCnt + '个</div>'
        htmlStr += '</div>'
        htmlStr += '<div class=\'index-video-bigshot-item-title fspx15 ff500 line1\'>' + Utils.dealUndefined(item.name) + '</div>'
        htmlStr += '<div class=\'index-video-bigshot-item-desc fspx13 line1\'>' + Utils.dealUndefined(item.introduction) + '</div>'
        htmlStr += '</div>'

      })
      $('.index-video-bigshot').html(htmlStr)

      meScroll.endSuccess()
    }).catch((error) => {
      //meScroll.endErr()
    })
  }

  function goBigDetail(characterId) {
    jsBridge.openWindow('html/video/bigshot-detail.html?characterId=' + characterId, {}, {noBar: false})
  }

  function goMoreBig() {
    jsBridge.openWindow('html/video/bigshot-video.html', {}, {noBar: false})
  }

  //获取系列专题信息
  function getVideoSeries() {
    Server.indexVideo.getVideoSeries({
      parentFuncCode: '002002',
      status: 1
    }).then(function (data) {
      let htmlStr = ''
      if (data.seriesInfo) {
        htmlStr += '<div class=\'index-video-series-item flex-column\'>'
        htmlStr += '<div class=\'flex-column\' onclick=\'goSeriesVideo("' + data.seriesInfo.funcCode + '")\'>'
        htmlStr += '<div class=\'index-video-series-item-img\'>'
        htmlStr += '<img src="' + data.seriesInfo.coverImgUrl + '"/>'
        htmlStr += '</div>'
        htmlStr += '<div class=\'index-video-series-item-content flex-row justify-content-between\'>'
        htmlStr += '<div class=\'index-video-series-item-title fspx16 ff500 line1\'>' + data.seriesInfo.funcName + '</div>'
        htmlStr += '<div class=\'index-video-series-item-zt\'><span>进入专题</span><span class=\'iconfont iconjinru ml5\'></span></div>'
        htmlStr += '</div>'
        htmlStr += '<div class=\'index-video-series-item-count fspx13\'>'
        htmlStr += '<span>共' + data.seriesInfo.articleCnt + '个视频</span>'
        htmlStr += '<span>  ·  </span>'
        htmlStr += '<span><span id="seriesReadCnt">' + data.seriesInfo.readCnt + '</span>人已学习</span>'
        htmlStr += '</div>'
        htmlStr += '</div>'
        if (data.seriesInfoList && data.seriesInfoList.length > 0) {
          htmlStr += '<div class=\'index-video-series-item-info\'>'
          data.seriesInfoList.forEach(function (item) {
            let jsonStr = JSON.stringify({
              infoId: item.infoId,
              infoType: '2',
              resourceType: '2'
            })
            htmlStr += '<div class=\'index-video-series-item-info-wrap flex-row align-items-center\' onclick=\'goDetail(' + jsonStr + ')\'>'
            htmlStr += '<div class=\'index-video-series-item-info-dot mr10\'></div>'
            htmlStr += '<div class=\'index-video-series-item-info-content flex-1 line1\'>' + item.mainTitle + '</div>'
            htmlStr += '</div>'
          })
          htmlStr += '</div>'
        }
        htmlStr += '</div>'
      }
      $('.index-video-series').html(htmlStr)

      meScroll.endSuccess()
    }).catch((error) => {
      //meScroll.endErr()
    })
  }

  function goMoreSeries() {
    jsBridge.openWindow('html/video/series-topics.html', {}, {noBar: false})
  }

  function goSeriesVideo(funcCode) {
    jsBridge.openWindow('html/video/special-video.html?funcCode=' + funcCode, {}, {noBar: false})
  }
</script>
</html>
